<template>
    <div class="color-picker-container">
      <div class="color-display" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }"></div>
      
      <div class="slider-group">
        <div class="slider-container">
          <label for="red">红色</label>
          <input 
            type="range" 
            id="red" 
            min="0" 
            max="255" 
            v-model.lazy.number="r" 
            class="slider red"
          >
          <span>{{ r }}</span>
        </div>
        
        <div class="slider-container">
          <label for="green">绿色</label>
          <input 
            type="range" 
            id="green" 
            min="0" 
            max="255" 
            v-model.lazy.number="g" 
            class="slider green"
          >
          <span>{{ g }}</span>
        </div>
        
        <div class="slider-container">
          <label for="blue">蓝色</label>
          <input 
            type="range" 
            id="blue" 
            min="0" 
            max="255" 
            v-model.lazy.number="b" 
            class="slider blue"
          >
          <span>{{ b }}</span>
        </div>
      </div>
      
      <div class="hex-display">
        <label>HEX值:</label>
        <input type="text" v-model="hexColor" readonly class="hex-input">
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RgbColorPicker',
    data() {
    return {
      r: 255,
      g: 0,
      b: 0
    }
  },
  computed: {
    hexColor() {
      return `#${this.componentToHex(this.r)}${this.componentToHex(this.g)}${this.componentToHex(this.b)}`;
    }
  },
  watch: {
    r: 'emitRgbValue',
    g: 'emitRgbValue',
    b: 'emitRgbValue'
  },
  methods: {
    componentToHex(c) {
      const hex = c.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    },
    emitRgbValue() {
      this.$emit('rgb-change', {
        r: this.r,
        g: this.g,
        b: this.b
      });
    }
  }
  }
  </script>
  
  <style scoped>
  .color-picker-container {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .color-display {
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
    border-radius: 4px;
  }
  
  .slider-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .slider {
    flex: 1;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    outline: none;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .red {
    background: linear-gradient(to right, #000000, #ff0000);
  }
  
  .red::-webkit-slider-thumb {
    background: #ff0000;
    border: 1px solid #880000;
  }
  
  .green {
    background: linear-gradient(to right, #000000, #00ff00);
  }
  
  .green::-webkit-slider-thumb {
    background: #00ff00;
    border: 1px solid #008800;
  }
  
  .blue {
    background: linear-gradient(to right, #000000, #0000ff);
  }
  
  .blue::-webkit-slider-thumb {
    background: #0000ff;
    border: 1px solid #000088;
  }
  
  .hex-display {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .hex-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    text-transform: uppercase;
  }
  </style>